<template>
  <div>
    <div class="areaDialogC">
      <div class="areaDialogC-close" @click="closeView()"></div>
      <div class="areaDialogC-top"></div>

      <div class="areaDialogC-contentC">
        <div class="areaDialogC-contentC-title">
          <!--          <div class="areaDialogC-contentC-title-itemC" v-for="(item,index) in titleData" :key="index"-->
          <!--               @click="changeTitle(index)">-->
          <div class="areaDialogC-contentC-title-itemC">
            <span>统计查询</span>
            <div class="areaDialogC-contentC-title-itemC-line" style="'opacity':'1'}"/>
            <!--            <div class="areaDialogC-contentC-title-itemC-line" :style="{'opacity':item.status?'1':'0'}"/>-->
          </div>
        </div>
        <div class="areaDialogC-contentC-line"></div>
        <!--        绘制区域-->
        <!--        <div class="areaDialogC-contentC-inputC" v-show="titleData[0].status">-->
        <!--          <div class="areaDialogC-contentC-inputC-type">名称：</div>-->
        <!--          <input class="areaDialogC-contentC-inputC-input" v-model="model.areaName"></input>-->
        <!--        </div>-->
        <!--        <div class="areaDialogC-contentC-inputC" v-show="titleData[0].status">-->
        <!--          <div class="areaDialogC-contentC-inputC-type">颜色：</div>-->
        <!--          <el-color-picker v-model="model.color"/>-->
        <!--        </div>-->
        <div class="areaDialogC-contentC-btnC" v-show="latLonData.length>2">
          <!--          <span>删除</span>-->
          <span @click="selectDeviceByLongitudeAndLatitude">确1认</span>
        </div>
        <!--        统计查询-->

        <div class="areaDialogC-contentC-statisticsC" v-if="titleData[1].status">
          <div class="areaDialogC-contentC-statisticsC-title">区中有：</div>
          <div style="display: flex;flex-direction: row;">
            <div class="areaDialogC-contentC-statisticsC-content">设备：{{
                searchData.device ? searchData.device.length : 0
              }}个
            </div>
            <div class="areaDialogC-contentC-statisticsC-content">地点：{{
                searchData.locations && searchData.locations.place ? searchData.locations.place.total : 0
              }}个
            </div>
            <div class="areaDialogC-contentC-statisticsC-content">
              企业：{{ searchData.locations && searchData.locations.enterprise ? searchData.locations.enterprise.total : 0}}家</div>
          </div>
          <div style="display: flex;flex-direction: row;width: 100%;">
            <div class="areaDialogC-contentC-statisticsC-echart" ref="myChart"></div>
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;">
              <div class="areaDialogC-contentC-statisticsC-desC" v-for="(item,index) in echartsData" :key="index">
                <div class="areaDialogC-contentC-statisticsC-desC-circle"
                     :style="{'background-color': echartsColor[index]}"></div>
                <div class="areaDialogC-contentC-statisticsC-desC-name">{{ item.name }}：{{ item.value }}个</div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <!--      <el-form :model="model" label-width="100px" :rules="rules" ref="form">-->
      <!--        <el-form-item label="名称" prop="areaName" required>-->
      <!--          <el-input v-model="model.areaName"/>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="备注" prop="remake" required>-->
      <!--          <el-input v-model="model.remake"/>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="颜色">-->
      <!--          <el-color-picker v-model="model.color"/>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item>-->
      <!--          <el-button @click="onDelete" type="info">删除</el-button>-->
      <!--          <el-button @click="onSave" type="primary">确认</el-button>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
    </div>
  </div>
</template>
<script>

import * as echarts from "echarts";
import {mapActions, mapGetters, mapState} from "vuex";
import {sendAreaDeviceMsg} from "@/utils/UeMessageUtils";
import {selectDeviceByLongitudeAndLatitude} from "@/api/area";


export default {
  name: 'area-form',
  props: {
    panelValue1: [String, Boolean],
    dataSource: {
      type: Object,
      default: () => ({
        areaName: '',
        remake: '',
        color: '#ff0000',
      }),
    },
  },
  data() {
    return {
      deviceNum: 0,//设备数据
      echartsColor: ['#64C7FF', '#FB5050', '#FFC100', '#94EB07', '#D9D9D9', '#64C7FF', '#FB5050', '#FFC100', '#94EB07', '#D9D9D9', '#64C7FF'],
      echartsData: [{'name': '高清摄像头', 'value': 0},
        {'name': '雷视测速预警一体机', 'value': 0},
        {'name': '高点热成像', 'value': 0},
        {'name': '鹰眼监控摄像机', 'value': 0},
        {'name': '网络存储设备', 'value': 0},
        {'name': '道路高清摄像机', 'value': 0},],
      searchData: {'device': [], 'locations': []},//搜索数据
      titleData: [{'content': '绘制区域', 'status': false}, {'content': '统计查询', 'status': true}],
      model: {
        areaName: '',
        remake: '',
        color: '#ff0000',
      },
      rules: {
        areaName: [
          {
            required: true,
            message: '名称不能为空',
          },
        ],
        remake: [
          {
            required: true,
            message: '备注不能为空',
          },
        ],
      },
      longitudeAndLatitude: [], //当前点位
    };
  },
  mounted() {
    this.update(this.dataSource);
    this.initChart()
  },
  beforeDestroy() {
    this.restData()
    sendAreaDeviceMsg(0)
  },
  watch: {
    panelValue1() {
      this.closeView()
    },
    dataSource(val) {
      this.update(val);
    },
    latLonData: { //
      handler: function (newV, oldV) {
        console.log("消息收到", newV)
        this.longitudeAndLatitude = newV.map(item => {
          const [lat, lon] = item;
          return {
            lat, lon
          }
        })
        this.selectDeviceByLongitudeAndLatitude()
      },
      deep: true
    },
  },
  computed: {
    ...mapGetters({
      latLonData: 'latlon/getLatLonData',
    }),
  },
  methods: {
    ...mapActions({
      setInfo: 'latlon/setInfo',
      restData: 'latlon/restData',
    }),
    //标题选择
    changeTitle(index) {
      this.titleData[index].status = true
      if (index == 0) {
        this.titleData[1].status = false
      }
      if (index == 1) {
        this.titleData[0].status = false
      }
    },
    //关闭界面
    closeView() {
      this.$emit('close')
    },
    //查询区域设备
    selectDeviceByLongitudeAndLatitude() {
      var _this = this

      var params = {'longitudeAndLatitude': this.longitudeAndLatitude}

      selectDeviceByLongitudeAndLatitude(params).then(res => {
        if (res && res.data && res.data.data) {
          console.log('查询区域设备=====res', res)
          _this.searchData = res.data.data
          if (_this.searchData && _this.searchData.device && _this.searchData.device.length > 0) {
            _this.deviceNum = 0
            _this.searchData.device.forEach(item => {
              if (item.data && item.data.length > 0) {

                _this.echartsData.forEach(eItem => {
                  if (eItem.name == item.dictValue) {
                    eItem.value = item.data.length
                  }
                })

                item.data.forEach(cItem => {
                  _this.deviceNum += 1
                })
              }


            })
          }
          _this.initChart()
        }
      })
    },
    onSave() {
      this.$refs.form.validate(async (isValid) => {
        if (isValid) {
          this.$emit('save', {
            ...this.model,
            type: 2,
          });
        }
      })
    },
    onDelete() {
      this.$emit('delete');
    },
    update(data) {
      this.model.areaName = data.areaName;
      this.model.remake = data.remake;
      this.model.color = data.color;
    },
    // 初始化文物建筑图表
    initChart() {

      const myEckhart = echarts.init(this.$refs.myChart);
      let option = myEckhart.getOption();
      if (option != null) {
        myEckhart.clear();
        myEckhart.setOption(option);
      }
      option = {
        color: this.echartsColor,
        title: {
          top: '20%',
          left: '50%',
          text: this.deviceNum,
          textStyle: {
            color: '#ffffff',
            fontStyle: 'normal',
            fontWeight: '600',
            fontSize: 18
          },
          subtext: "设备",
          subtextStyle: {
            color: 'rgba(255, 255, 255, 0.60)',
            fontSize: 18
          },
          x: 'center',
          y: 'center',
          textAlign: 'center'

        },
        grid: {
          top: '15%',
          left: 0,
          right: '0',
          bottom: 5,
          containLabel: true,
        },
        legend: {
          show: false
        },
        series: [
          //中间
          {
            type: 'pie',
            startAngle: 90,
            radius: ['75%', '85%'],
            center: ['50%', '50%'],
            color: this.echartsColor,
            hoverAnimation: false, ////设置饼图默认的展开样式
            label: {
              show: false,
              normal: {
                formatter: '{b}\n{d}%',
                show: false,
                position: ''
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },

            itemStyle: { // 此配置
              normal: {
                borderRadius: 10,
                shadowBlur: 10,
                shadowColor: 'rgba(8, 32, 72, 0.71)'
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 2,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: this.echartsData
          },
          { // 内部
            name: '',
            label: {
              show: false,
            },
            z: 5,
            type: 'pie',
            cursor: 'default',
            center: ['50%', '50%'],
            radius: ['95%', '100%'],
            startAngle: 270,
            hoverAnimation: false,
            legendHoverLink: false,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 2,
              name: '省保',
              itemStyle: {
                normal: {
                  color:  // 颜色渐变
                      new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                        offset: 0,
                        color: 'rgba(31, 198, 255, 0.5)' // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: 'rgba(31, 198, 255, 0)'  // 100% 处的颜色
                      }])
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }, {
              value: 2,
              name: '省保',
              itemStyle: {
                normal: {
                  color:  // 颜色渐变
                      new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                        offset: 0,
                        color: 'rgba(31, 198, 255, 0)' // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: 'rgba(31, 198, 255, 0.5)'  // 100% 处的颜色
                      }])
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }]
          },
        ],
      };
      myEckhart.setOption(option);
    },
  },

}
</script>
<style lang="scss">
.areaDialogC {
  position: absolute;
  right: 20px;
  z-index: 99;
  top: 50%;
  width: 411px;
  height: 250px;
  display: flex;
  flex-direction: column;

  &-close {
    background-size: 100% 100%;
    background-image: url("@/assets/icon_close.png");
    width: 14px;
    height: 14px;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 100;
    cursor: pointer;

    &:hover {
      opacity: 0.7;
    }
  }

  &-top {
    width: 80px;
    height: 10px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_dialog_part.png");
  }

  &-contentC {
    width: 100%;
    height: 240px;
    display: flex;
    position: relative;
    flex-direction: column;
    background: rgba(8, 32, 72, 0.71);
    opacity: 1;

    &-title {
      display: flex;
      flex-direction: row;

      &-itemC {
        cursor: pointer;
        display: flex;
        margin: 5px 16px 0px 16px;
        flex-direction: column;

        &:hover {
          opacity: 0.8;
        }

        span {
          display: block;
          height: 25px;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 25px;
        }

        &-line {
          height: 2px;
          background: #FFFFFF;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
        }
      }
    }

    &-line {
      width: 100%;
      height: 1px;
      opacity: 1;
      background: rgba(98, 183, 255, 0.2);
    }

    &-inputC {
      margin-top: 14px;
      display: flex;
      flex-direction: row;

      &-type {
        width: 56px;
        height: 34px;
        margin-left: 16px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        line-height: 34px;
      }

      &-input {
        width: 310px;
        padding: 0px 5px;
        height: 32px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        background-color: transparent;
        border: 1px solid rgba(98, 183, 255, 0.2);
        font-size: 12px;
        font-family: PingFang HK-Regular, PingFang HK;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 32px;
      }
    }

    &-btnC {
      display: flex;
      position: absolute;
      flex-direction: row;
      justify-content: center;
      bottom: 30px;
      width: 100%;

      span {
        cursor: pointer;
        display: block;
        width: 86px;
        height: 36px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        text-align: center;
        font-size: 12px;
        font-family: PingFang HK-Regular, PingFang HK;
        font-weight: 400;
        color: #FFFFFF;
        margin: 0px 16px;
        line-height: 36px;

        &:hover {
          opacity: 0.8;
        }
      }

      :nth-child(1) {
        background: rgba(221, 248, 255, 0.5);
      }

      :nth-child(2) {
        background: rgba(0, 230, 255, 0.7);
      }
    }

    &-statisticsC {
      margin-left: 16px;
      display: flex;
      flex-direction: column;

      &-title {
        margin-top: 16px;
        height: 22px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        line-height: 22px;
      }

      &-content {
        width: 30%;
        height: 22px;
        margin-top: 11px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 22px;
        margin-bottom: 20px;
      }

      &-echart {
        margin-right: 10px;
        min-width: 98px;
        max-width: 98px;
        min-height: 98px;
        max-height: 98px;
      }

      &-desC {
        max-width: 130px;
        min-width: 130px;
        height: 22px;
        display: flex;
        align-items: center;
        flex-direction: row;

        &-circle {
          width: 6px;
          height: 6px;
          border-radius: 1000px;
          opacity: 1;
        }

        &-name {
          margin-left: 9px;
          height: 22px;
          white-space: nowrap;
          display: block;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
          line-height: 22px;
        }
      }
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }

  .areaDialogC {
    width: calHeight_2k(411px);
    height: calHeight_2k(250px);


    &-close {
      width: calHeight_2k(14px);
      height: calHeight_2k(14px);
      top: calHeight_2k(18px);
      right: calHeight_2k(18px);
    }

    &-top {
      width: calHeight_2k(80px);
      height: calHeight_2k(10px);
    }

    &-contentC {
      height: calHeight_2k(240px);

      &-title {

        &-itemC {


          span {
            display: block;
            height: calHeight_2k(25px);
            line-height: calHeight_2k(25px);
          }

          &-line {
            height: calHeight_2k(2px);
          }
        }
      }


      &-inputC {
        margin-top: calHeight_2k(14px);

        &-type {
          width: calHeight_2k(56px);
          height: calHeight_2k(34px);
          margin-left: calHeight_2k(16px);
          line-height: calHeight_2k(34px);
        }

        &-input {
          width: calHeight_2k(310px);
          padding: 0px calHeight_2k(5px);
          height: calHeight_2k(32px);
          line-height: calHeight_2k(32px);
        }
      }

      &-btnC {
        bottom: calHeight_2k(30px);

        span {
          width: calHeight_2k(86px);
          height: calHeight_2k(36px);
          margin: 0px calHeight_2k(16px);
          line-height: calHeight_2k(36px);

        }

      }

      &-statisticsC {
        margin-left: calHeight_2k(16px);

        &-title {
          margin-top: calHeight_2k(16px);
          height: calHeight_2k(22px);
          line-height: calHeight_2k(22px);
        }

        &-content {
          height: calHeight_2k(22px);
          margin-top: calHeight_2k(11px);
          line-height: calHeight_2k(22px);
          margin-bottom: calHeight_2k(20px);
        }

        &-echart {
          margin-right: calHeight_2k(10px);
          min-width: calHeight_2k(98px);
          max-width: calHeight_2k(98px);
          min-height: calHeight_2k(98px);
          max-height: calHeight_2k(98px);
        }

        &-desC {
          width: calHeight_2k(140px);
          height: calHeight_2k(22px);

          &-circle {
            width: calHeight_2k(6px);
            height: calHeight_2k(6px);
          }

          span {
            margin-left: calHeight_2k(9px);
            height: calHeight_2k(22px);
            line-height: calHeight_2k(22px);
          }
        }
      }
    }
  }
}
</style>